<template>
  <view class="report-pane">
    <charttips :name="carLineTooltip.name" :tooltip="carLineTooltip.tip" :placement="carLineTooltip.tipPlacement" />
    <uChartArea v-if="inited" :uChartData="uChartData" :options="options" :canvasId="canvasId" tooltipFormat="carUseRateFormatter" />
  </view>
</template>

<script>
  import charttips from '../components/charttips.vue'
  import uChartArea from '../components/uChartArea.vue'

  export default {
    props: {
      amount: {
        type: Array,
      },
      canvasId: {
        type: String,
        default: '',
      },
      carLineTooltip: {
        type: Object,
        default: () => {},
      },
      // 当前组件所在的页面path，解决禅道问题：16531
      pagePath: String,
    },
    data() {
      return {
        inited: false,
        uChartData: {
          categories: [],
          series: [
            {
              name: this.canvasId == 'carHire' ? '出租率' : '预计收益',
              data: [],
            },
          ],
        },
        options: {
          dataLabel: false,
          extra: {
            tooltip: {
              showArrow: true,
              legendShow: false,
              bgColor: '#fff',
              bgOpacity: 1,
              fontColor: '#1D2129',
            },
          },
          xAxis: {
            format: 'yAxisFormat2MMDD',
          },
          yAxis: {
            data: [{}],
          },
        },
      }
    },
    components: {
      uChartArea,
      charttips,
    },
    watch: {
      amount: {
        handler(list) {
          this.amountHandler(list)
        },
        immediate: true,
      },
    },
    methods: {
      // 金额监听处理函数
      amountHandler(list) {
        if (list?.length > 0) {
          this.uChartData.categories = list.map((item) => item.date)
          this.uChartData.series[0].data = list.map((item) => item.data)
          this.options.yAxis.data[0].unit = this.canvasId === 'storeHire' ? '元' : '%'
          // 判断当前页面是否为首页
          setTimeout(() => {
            if (this.pagePath) {
              const pages = getCurrentPages()
              var currentRoute = pages[pages.length - 1].route
              if (currentRoute == this.pagePath) {
                this.inited = true
              }
            } else {
              this.inited = true
            }
          }, 0)
        }
      },
      renderdate(date) {
        return date < 10 ? '0' + date : date
      },
      onShow() {
        console.log('onShow')
        if (!this.inited) {
          this.amountHandler(this.amount)
        }
      },
    },
    mounted() {
      uni.$on('onShow', this.onShow)
    },
    unmounted() {
      uni.$off('onShow', this.onShow)
    },
  }
</script>

<style lang="less" scoped></style>
